<!--年级班级管理-->
<template>
  <div class="execution">
    <div class="top-box">
      <span>单位名称：</span>
      <el-input v-model="input" class="in" placeholder="请输入内容"></el-input>
      <el-button class="ma btn" size="small" type="primary" @click="onSearchDepart()">查询</el-button>
      <el-button size="small" type="warning" @click="resetForm()">重置</el-button>
    </div>
    <basic-container>
      <div class="avue-crud">
        <!--新增单位及弹窗-->
        <el-button ref="addOrUpdate" class="xz" size="small" type="success" @click="addTreeselect()">新 增</el-button>
        <el-dialog ref="dataFrom" :title="dialogTitle" :visible.sync="visible" center width="636px">
          <el-form :model="form" :rules="rules">
            <!--上级单位-->
<!--            <el-form-item :label-width="formLabelWidth" label="上级单位" prop="parentId">-->
<!--              <treeselect v-model="form.parentId"-->
<!--                          :disabled="disable"-->
<!--                          :normalizer="normalizer"-->
<!--                          :options="menuOptions"-->
<!--                          :show-count="true"-->
<!--                          class="in"-->
<!--                          placeholder="选择上级菜单">-->
<!--              </treeselect>-->
<!--            </el-form-item>-->
<!--            <el-form-item :label-width="formLabelWidth" label="所选类型" prop="typeNum">-->
<!--                <el-radio v-model="form.typeNum" :disabled="disabled" label=2>年级</el-radio>-->
<!--                <el-radio v-model="form.typeNum" :disabled="disabled" label=3>班级</el-radio>-->
<!--            </el-form-item>-->
            <!--单位名称-->
<!--            <p v-if="form.typeNum === '2'" class="shape"><span class="required">*</span>年级名称</p>-->
<!--            <p v-else-if="form.typeNum === '3'" class="shape"><span class="required">*</span>班级名称</p>-->
            <p class="shape"><span class="required">*</span>{{ form.typeNumname }}</p>
            <el-form-item prop="name" style="display: inline-block">
              <el-input v-model="form.name" autocomplete="off" class="name" prop="name"></el-input>
            </el-form-item>
            <!--单位状态-->
            <el-form-item :label-width="formLabelWidth" label="单位状态" prop="delFlag">
                <el-radio v-model="form.delFlag" label="0">正常</el-radio>
                <el-radio v-model="form.delFlag" label="1">停用</el-radio>
            </el-form-item>
          </el-form>
          <!--是否保存-->
          <div slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary" @click="Submit()">确 定</el-button>
          </div>
        </el-dialog>
<!--        列表-->
        <el-table
            stripe
            border
            v-loading="loading"
            :data=menuList
            :cell-style="tableCellStyle"
            :header-cell-style='tableHeaderColor'
            :tree-props="{children: 'children', hasChildren: 'hasChildrens'}"
            :expand-row-keys="['1']"
            row-key="deptId">
          <el-table-column :show-overflow-tooltip="true" label="单位名称" prop="name"
                           style="text-align: left"></el-table-column>
          <el-table-column align="center" label="状态" prop="delFlag">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.delFlag === '0'"  type="success">正常</el-tag>
              <el-tag v-if="scope.row.delFlag === '1'"  type="danger">停用</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime"></el-table-column>
          <el-table-column align="center" class-name="small-padding fixed-wdeptidth" label="操作" prop="operation" width="250px">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="revise(scope.row)">修 改</el-button>
              <el-button size="mini" type="success" @click="addTreeselect(scope.row.deptId)">新 增</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删 除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </basic-container>
  </div>
</template>

<script>
import {addObj, delObj, departObj, editObj, gradeObj, reviseObj, SearchObj} from '@/api/depart/department'
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"

export default {
  name: "grade",
  components: {Treeselect},
  data() {
    return {
      parentId:'1',
      disabled: false,
      company: '',
      total: null,
      // 遮罩层
      loading: true,
      // 菜单表格树数据
      menuList: [],
      newMenuList: [],
      // 菜单树选项
      menuOptions: [],
      treeselect: [],
      //搜索框
      input: '',
      name: '',
      // delFlag:'0',
      //弹窗
      visible: false,
      //标题
      dialogTitle: '',
      //定义表单内容
      form: {
        deptId: null,
        menuId: '',
        name: '',
        delFlag: '0',
        createTime: '',
        typeNum:'',
        typeNumname:'',
      },
      disable: '',
      //弹窗内容宽度
      formLabelWidth: '120px',
      tableCellStyle: {
        'font-size': '16px',
        'padding': '14px 0',
        'color': '#000',
        'text-align': 'center',
      },
      tableHeaderColor: {
        'font-size': '16px',
        'padding': '14px 0',
        'font-weight': 'normal',
        'color': '#000',
        'text-align': 'center',
      },
      checked1: true,
      // 表单校验
      rules: {
        parentId: [
          {required: true}
        ],
        typeNum: [
          {required: true, trigger: "none"}
        ],
        delFlag: [
          {required: true, trigger: "none"}
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //展示表格
    getList() {
      this.loading = true;
      let param = {
        'current': this.currentPage,
      }
      gradeObj(param).then(res => {
        this.total = res.data.data.total;
        this.menuList = res.data.data
        this.loading = false;
      });
    },

    //删除
    handleDelete(row) {
      this.$confirm('是否删除单位"' + row.name + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delObj(row.deptId);
      }).then(() => {
        this.getList();
        this.$message.success('删除成功')
      })
    },


    // 搜索
    onSearchDepart: function () {
      if (this.input === "") {
        this.$message.warning("查询条件不能为空！");
      } else {
        let param = {
          'name': this.input,
          'deptTypeNum': [2, 3]
        };
        SearchObj(param).then(res => {
          this.menuList = res.data.data
        });
      }
    },

    // 重置
    resetForm: function () {
      this.input = null
      let param = {
        'name': this.input,
      };
      departObj(param).then(res => {
        this.menuList = res.data.data
        this.getList(this.page)
      });
    },

    /** 查询菜单下拉树结构 */
    addTreeselect(deptId) {
      this.visible = true;
      if (deptId != null) {
        this.form.parentId = deptId;
        this.disable = true;
        this.disabled = false
        this.form.name = null
        this.form.delFlag = null
        gradeObj().then(res => {
          this.menuOptions = [];
          const menu = {children: []};
          menu.children = res.data.data;
          this.menuOptions.push(menu);
        });
        if(this.form.parentId === '1'){
          this.form.typeNum = 2
          this.dialogTitle = "新增年级";
          this.form.typeNumname = '年级名称'
          console.log('form',this.form)
        }else {
          this.form.typeNum = 3
          this.dialogTitle = "新增班级";
          this.form.typeNumname = '班级名称'
        }
      } else {
        this.form.parentId = 1
        this.form.typeNum = 2
        this.dialogTitle = "新增年级";
        this.form.typeNumname = '年级名称'
        this.disable = false
        this.disabled = false
        gradeObj().then(res => {
          this.menuOptions = [];
          const menu = {deptId: 1, name: '教学部', children: []};
          menu.children = res.data.data[0].children;
          this.menuOptions.push(menu);
        });
        this.form.name = null
        this.form.delFlag = null
      }
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.name,
        children: node.children
      };
    },

    //根据ID查询
    revise(row) {
      this.visible = true;
      this.dialogTitle = "修改";
      this.disable = true
      this.disabled = true
      reviseObj(row.deptId).then(res => {
        this.form = res.data.data
        if(this.form.parentId === '0'){
          this.form.typeNumname = '单位名称'
        }else if(this.form.parentId === '1') {
          this.form.typeNumname = '年级名称'
        }else {
          this.form.typeNumname = '班级名称'
        }
        gradeObj().then(res => {
          this.menuOptions = [];
          const menu = {deptId: 0, name: '无', children: []};
          menu.children = res.data.data;
          this.menuOptions.push(menu);
        });
      });
    },

    //新增表单提交
    Submit() {
      this.loading = true;
      let param = {
        'parentId': this.form.parentId,
        'name': this.form.name,
        'delFlag': this.form.delFlag,
        'typeNum': this.form.typeNum
      }
      if (this.form.deptId == null) {
        addObj(param).then(res => {
          this.getList();
          this.visible = false;
          this.loading = false;
          this.$message.success('添加成功')
          this.form.parentId = null
          this.form.name = null
          this.form.delFlag = null
          this.form.typeNum = null
        });
      } else {
        editObj(this.form).then(res => {
          this.getList();
          this.visible = false;
          this.loading = false;
          this.$message.success('修改成功')
          this.form.deptId = null
          this.form.parentId = null
          this.form.name = null
          this.form.delFlag = null
          this.form.typeNum = null
        });
      }
      this.loading = false;
    },
  }
};
</script>
<style scoped>
.top-box {
  width: 505px;
  height: 60px;
  border: 1px solid #DCDFE6;
  border-radius: 10px;
  padding: 12px 0 12px 20px;
  background: #fff;
  margin: 20px 0 30px 40px;
}

.in {
  width: 35% !important;
  height: 35px !important;
  line-height: 35px !important;
}

.xz {
  margin-bottom: 20px;
}

.ma {
  margin-left: 20px;
}

.xzdw {
  font-weight: bold;
  margin-left: 50px;
  padding-bottom: 20px;
}

.option {
  margin-left: 70px;
}
.shape{
  display: inline-block;
  margin-left: 42px;
}
.required{
  color: red;
  margin-right: 6px;
}
.name{
  margin-left: 14px !important;
  width: 76% !important;
  height: 35px !important;
  line-height: 35px !important;
}
.el-form-item__content {
  margin-left: 16px !important;
}
</style>
<style>
.el-dialog__header {
  font-weight: bold;
  margin-left: 25px;
  text-align: left;
  padding: 28px 0 10px 0;
}

.vue-treeselect--disabled .vue-treeselect__control {
  background-color: #f1f1f1;
}
</style>
